<template>
  <div>
    <!-- 自定义指令 和nextTick -->
     <!-- 
       this.$nextTick(()=>{}) 的原理是什么
       由于nextTick 的回调函数放到了异步队列中的promise中去执行 所以能获取最新dom
      
       

      js事件循环机制event Loop

      js 是单线程的程序，js把任务又分成同步任务和异步任务，
      同步任务先执行，异步任务放到异步对列表中，
      异步任务又分成 宏任务和微任务，先执行，微任务在执行宏任务

      常见的宏任务： setTimeout ,setInterVal ,script ,ajax

      常见的微任务：process.nextTick, promise.then(),async和await 

    -->
    <!-- 使用 混入的 数据 方法 计算属性等 -->
    <h1 @click="say">{{myname}}</h1>
      <h1 :style="{color:myColor}">红色</h1>
      <button @click="toNews"> 跳转关于的 新闻页面</button>
        <button @click="toPay"> 去支付</button>

        <hr />
        <div>vuex的state的count:{{$store.state.count}}</div>
        <h1>vuex的getters：{{$store.getters.countDouble}}</h1>
        <button @click="toPro"> 去产品</button>
        <button @click="toChange">通过mutations方法让count加5</button>
          <hr />
        <my-dialog title="添加管理员" width="50%" :formData="formData"
        @send="getData">
            
        </my-dialog>
  </div>
</template>

<script >
import themeMin from '../mixins/theme'
import myDialog from './eleui'
  export default {
     components:{myDialog},
      mixins:[themeMin], //mixins 局部混入  写好的 组件对象
      data(){
        return {
          formData:[
            {
              type:'text',
              label:"商品名称",
              model:'pname'
            },
            {
              type:'text',
              label:"商品价格",
              model:'price'
            },
            {
              type:'text',
              label:"商品颜色",
              model:'color'
            },
             {
              type:'select',
              label:"商品分类",
              model:'sel',
              optArr:[
                {value:1,label:'手机'},
                 {value:2,label:'电视'}
              ]
            },
            {
              model:'isvip',
              type:'switch',
              label:'是否vip'
            }
          ]
        }
      },
      created() {
        console.log("创建后后后")
      },
      methods: {
        getData(formData){
          // 父组件接受数据
            console.log(formData,'接受到了子组件的数据')
        },
        say(){
          console.log("罚单。。。")
        },
        toNews(){
          // path跳转子路由
          this.$router.push({path:"/about/aboutone"})
          // name跳转子路由
           this.$router.push({name:"aboutone"})
        },
        toPay(){ //跳转支付
          this.$router.push("/pay")
        },
        toPro(){//去产品页
            this.$router.push("/product")
        },
        toChange(){
          // 调用vuex中的mutaions中的方法
          this.$store.commit("editCount",5)
   
        }
      },

  }
</script>
<style lang="less" scoped>

</style>